<template>
    <view class="uni-container">
        <uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
            <uni-forms-item name="content" label="留言内容/回复内容" required>
                <textarea @input="binddata('content', $event.detail.value)" class="uni-textarea-border"
                    v-model="formData.content" trim="right"></textarea>
            </uni-forms-item>
            <uni-forms-item name="imgs" label="图片列表">
                <uni-file-picker file-mediatype="image" :limit="6" return-type="array"
                    v-model="formData.imgs"></uni-file-picker>
            </uni-forms-item>
            <uni-forms-item name="contact" label="联系人">
                <uni-easyinput v-model="formData.contact" trim="both"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item name="mobile" label="联系电话">
                <uni-easyinput v-model="formData.mobile" trim="both"></uni-easyinput>
            </uni-forms-item>
            <view class="uni-button-group">
                <button type="primary" class="uni-button" @click="submit">提交</button>
            </view>
        </uni-forms>
    </view>
</template>

<script>
    import {
        validator
    } from '../../js_sdk/validator/opendb-feedback.js';

    const db = uniCloud.database();
    const dbCollectionName = 'opendb-feedback';

    function getValidator(fields) {
        let result = {}
        for (let key in validator) {
            if (fields.indexOf(key) > -1) {
                result[key] = validator[key]
            }
        }
        return result
    }

    export default {
        data() {
            let formData = {
                "content": "",
                "imgs": [],
                "contact": "",
                "mobile": ""
            }
            return {
                formData,
                formOptions: {},
                rules: {
                    ...getValidator(Object.keys(formData))
                }
            }
        },
        onLoad(e) {
            if (e.id) {
                let id = e.id
                this.formDataId = id
                this.getDetail(id)
            }
        },
        onReady() {
            this.$refs.form.setRules(this.rules)
        },
        methods: {
            /**
             * 触发表单提交
             */
            submit() {
                uni.showLoading({
                    mask: true
                })
                this.$refs.form.validate().then((res) => {
                    this.submitForm(res)
                }).catch(() => {
                    uni.hideLoading()
                })
            },

            submitForm(value) {
                // 使用 clientDB 提交数据
                db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
                    console.log(res);
                    uni.showToast({
                        icon: 'none',
                        title: '修改成功'
                    })
                    this.getOpenerEventChannel().emit('refreshData')
                    setTimeout(() => uni.navigateBack(), 500)
                }).catch((err) => {
                    uni.showModal({
                        content: err.message || '请求服务失败',
                        showCancel: false
                    })
                }).finally(() => {
                    uni.hideLoading()
                })
            },

            /**
             * 获取表单数据
             * @param {Object} id
             */
            getDetail(id) {
                uni.showLoading({
                    mask: true
                })
                db.collection(dbCollectionName).doc(id).field("content,imgs,contact,mobile").get().then((res) => {
                    const data = res.result.data[0]
                    if (data) {
                        this.formData = data
                    }
                }).catch((err) => {
                    uni.showModal({
                        content: err.message || '请求服务失败',
                        showCancel: false
                    })
                }).finally(() => {
                    uni.hideLoading()
                })
            }
        }
    }
</script>

<style>
    .uni-container {
        padding: 15px;
    }

    .uni-input-border,
    .uni-textarea-border {
        width: 100%;
        font-size: 14px;
        color: #666;
        border: 1px #e5e5e5 solid;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .uni-input-border {
        padding: 0 10px;
        height: 35px;

    }

    .uni-textarea-border {
        padding: 10px;
        height: 80px;
    }

    .uni-button-group {
        margin-top: 50px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
    }

    .uni-button {
        width: 184px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        line-height: 1;
        margin: 0;
    }
</style>